'use client'

import React from 'react'
import { Sheet, User } from '@/types/sheet'
import { Plus, FileSpreadsheet, Users, Calendar, MoreVertical } from 'lucide-react'
import { cn } from '@/lib/utils'

interface SheetListProps {
  sheets: Sheet[]
  currentUser: User
  onCreateSheet: () => void
  onSelectSheet: (sheet: Sheet) => void
  onDeleteSheet: (sheetId: string) => void
}

export function SheetList({
  sheets = [],
  currentUser,
  onCreateSheet,
  onSelectSheet,
  onDeleteSheet
}: SheetListProps) {
  const formatDate = (date: Date | string) => {
    const dateObj = typeof date === 'string' ? new Date(date) : date
    
    // 检查日期是否有效
    if (isNaN(dateObj.getTime())) {
      return '无效日期'
    }
    
    return new Intl.DateTimeFormat('zh-CN', {
      year: 'numeric',
      month: 'short',
      day: 'numeric',
      hour: '2-digit',
      minute: '2-digit'
    }).format(dateObj)
  }

  return (
    <div className="w-80 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-700 flex flex-col">
      {/* 头部 */}
      <div className="p-4 border-b border-gray-200 dark:border-gray-700">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
            我的表格
          </h2>
          <button
            onClick={onCreateSheet}
            className="flex items-center gap-2 px-3 py-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
          >
            <Plus size={16} />
            <span className="text-sm">新建</span>
          </button>
        </div>
        
        {/* 用户信息 */}
        <div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
          <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white text-sm font-medium">
            {currentUser.name.charAt(0).toUpperCase()}
          </div>
          <div>
            <div className="text-sm font-medium text-gray-900 dark:text-white">
              {currentUser.name}
            </div>
            <div className="text-xs text-gray-500 dark:text-gray-400">
              {currentUser.email}
            </div>
          </div>
        </div>
      </div>

      {/* 表格列表 */}
      <div className="flex-1 overflow-y-auto p-4">
        {sheets.length === 0 ? (
          <div className="text-center py-8">
            <FileSpreadsheet size={48} className="mx-auto text-gray-400 mb-4" />
            <p className="text-gray-500 dark:text-gray-400 mb-4">
              还没有表格，创建一个开始协作吧！
            </p>
            <button
              onClick={onCreateSheet}
              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
            >
              创建表格
            </button>
          </div>
        ) : (
          <div className="space-y-2">
            {sheets.map(sheet => (
              <div
                key={sheet.id}
                onClick={() => onSelectSheet(sheet)}
                className="p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors group"
              >
                <div className="flex items-start justify-between">
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-1">
                      <FileSpreadsheet size={16} className="text-blue-600 flex-shrink-0" />
                      <h3 className="text-sm font-medium text-gray-900 dark:text-white truncate">
                        {sheet.title}
                      </h3>
                    </div>
                    
                    {sheet.description && (
                      <p className="text-xs text-gray-500 dark:text-gray-400 mb-2 line-clamp-2">
                        {sheet.description}
                      </p>
                    )}
                    
                    <div className="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
                      <div className="flex items-center gap-1">
                        <Users size={12} />
                        <span>{sheet.members?.length || 0}</span>
                      </div>
                      <div className="flex items-center gap-1">
                        <Calendar size={12} />
                        <span>{formatDate(sheet.updatedAt)}</span>
                      </div>
                    </div>
                  </div>
                  
                  <button
                    onClick={(e) => {
                      e.stopPropagation()
                      onDeleteSheet(sheet.id)
                    }}
                    className="opacity-0 group-hover:opacity-100 p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition-all"
                  >
                    <MoreVertical size={14} />
                  </button>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  )
}
